<!-- <template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{ item }}</p>
</template>

<script>
    export default {
        data() {
            return {
                names: [" 达尼亚尔", "胡迪", "老虎", "帕热裤"]
            }
        }
    } 
</script> -->

<!-- <template>
    <p v-for="{item, index} in names" :key="index">{{ item }}</p>
</template>

<script>
    export default {
        data() {
            return {
                names: [" 达尼亚尔", "胡迪", "老虎", "帕热裤"]
            }
        }
    }
</script> -->

<!-- <template>
    <h3>事件处理</h3>
    <button @click="count++">Add</button>
    <p>{{ count }}</p>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }
</script> -->

<!-- <template>
    <h3>事件处理</h3>
    <button @click="count++">Add</button>
    <p>{{ count }}</p>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
        ,
        methods: {
            addCount() {
                this.count++;
            }
        }
    }
</script> -->

<template>
    <h3>事件修饰符</h3>
    <!-- 阻止默认事件 -->
    <a @click.prevent="clickHandle" href="https://www.baidu.com">百度</a>
    <div @click="clickDiv">
        <p @click.stop="clickP">测试冒泡</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            clickHandle(e) {
                // e.preventDefault();
                console.log('clicked');
            },
            clickDiv() {
                console.log('Div');
            },
            clickP(e) {
                // 阻止冒泡
                // e.stopPropagation()
                console.log("P");
            }
        }
    }
</script>